<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8 ">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css')}} ">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/weclome.css') }}">
    <!-- <link rel="stylesheet" href="css/bootstrap-grid.min.css"> -->
    <link rel="stylesheet" href="dist/zoomify.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                </div>
                <div class="col-md-5">
                    <img src="http://www.zoores.ac.cn/images/2095-8137/banner.png"class="img-responsive center-block">
                </div>
                <div class="col-md-4 b">
                    <a href="https://orcid.org/register" target="_blank"><img src="http://www.zoores.ac.cn/images/2095-8137/orcid.png"  width="80" height="28" style="vertical-align:middle; margin-right:10px;"></a>
                <img src="http://www.zoores.ac.cn/images/2095-8137/email.png" style="vertical-align:middle;" > <a href="http://www.zoores.ac.cn/EN/alert/showAlertInfo.do"><span class="ad_wz">E-mail Alert</span></a>&nbsp;&nbsp; <a href="http://www.zoores.ac.cn/CN/2095-8137/home.shtml" target="_blank"><span class="ad_wz">Chinese</span></a>
                <div class="search">
                    <IFRAME id="UserInfo" border=0 src="http://www.zoores.ac.cn/EN/article/keywordSearch_t.jsp" width=370 height=45 scrolling=no frameborder=0 allowtransparency="true" style="margin-top: 10px"></IFRAME>
                </div>
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>
      <div class="container">
          <nav class="navbar navbar-default">
            <div class="container-fluid a">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Home</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Content <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">For Authors <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About ZR <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                    </ul>
                  </li>
               </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="../navbar-static-top/">Static top >></a></li>
                  <li><a href="../navbar-fixed-top/">Fixed top >></a></li>
                </ul>
              </div>
            </div>
          </nav>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" >
          <div class="col-md-1"></div>
          <div class="col-md-10" style="border:1px red solid">
            <div class="col-md-8" style="border:1px blue solid">
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <div class="item active">
                    <img src="{{asset('images/b.jpg')}}" alt="...">
                    <div class="carousel-caption">
                    </div>
                  </div>
                  <div class="item">
                    <img src="{{asset('images/d.jpeg')}}" alt="...">
                    <div class="carousel-caption">
                    </div>
                  </div>
                  <div class="item">
                    <img src="{{asset('images/f.jpg')}}" alt="...">
                    <div class="carousel-caption">
                    </div>
                  </div>
                  <div class="item">
                    <img src="{{asset('images/g.jpg')}}" alt="...">
                    <div class="carousel-caption">
                    </div>
                  </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
              <div align="center">
                      <h3><a href="#">Featured Articles</a></h3>
              </div>
              <div>
                 <!--  <a href="#">
                      <span>A new genus and three new species of miniaturized microhylid frogs from Indochina (Amphibia: Anura: Microhylidae: Asterophryinae)</span>
                  </a>
                  <br>
                  <span class="zuozhedoi">Nikolay A. Poyarkov, Jr., Chatmongkon Suwannapoom, Parinya Pawangkhanant, Akrachai Aksornneam, Tang Van Duong, Dmitriy V. Korost, Jing Che</span>
                  <br>
                  <span class="zuozhedoi">2018 Vol. 39 (3): 130-157 </span>
                  <br> -->

                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:17px;">
                    <tr>

                      <td valign="top">
                                <a href="../10.24272/j.issn.2095-8137.2018.045" target="_blank"><span class="timu">Ecology and social system of northern gibbons living in cold seasonal forests</span></a>
                              <br>
                              <span class="zuozhedoi">Zhen-Hua Guan, Chang-Yong Ma, Han-Lan Fei, Bei Huang, Wen-He Ning, Qing-Yong Ni, Xue-Long Jiang, Peng-Fei Fan</span>
                              <br>

                          <span class="zuozhedoi">2018&nbsp;Vol. 39 (4): 255-265
                              </span>

                          </td>

                    </tr>
                  </table>
              </div>
            </div>
            <div class="col-md-4">
              <div>
                <div class="col-md-6 check">
                    <div class="example">
                          <img id='img' class='min' src="{{asset('images/d.jpeg')}}">
                      </div>
                      <div>
                      <a href="#">
                            <img id='pic' src="{{asset('images/r.png')}}">
                          </a>
                        </div>
                </div>
                </div>
                <div class="col-md-6"></div>
            </div>
          </div>
          <div class="col-md-1"></div>
        </div>
        <div class="col-md-2"></div>
    </div>

<script src="{{ asset("/js/jquery.min.js") }}"></script>
<script src="{{ asset("/js/jquery-ui-1.10.4.custom.min.js") }}"></script>
<script src="{{ asset("/js/bootstrap.min.js") }}"></script>
<script src="dist/zoomify.min.js"></script>
<script type="text/javascript">
  $(function(){
    $("#pic").on('click', function(){
       $('.example img').click().zoomify();
    })
  })
  //$('.example img').zoomify();
</script>
</body>
</html>